<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>分类管理 - 记账应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body class="bg-gray-100">
    <!-- 引入状态栏组件 -->
    <div id="status-bar-container"></div>

    <!-- 主要内容区域 -->
    <div class="pb-24">
        <!-- 顶部操作栏 -->
        <div class="bg-white px-4 py-4 flex justify-between items-center sticky top-0 z-10">
            <a href="javascript:history.back()" class="text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
            </a>
            <h1 class="text-xl font-bold">管理分类</h1>
            <div class="w-6"></div> <!-- 占位元素保持居中 -->
        </div>

        <!-- 分类选择切换 -->
        <div class="bg-white mt-2">
            <div class="flex border-b">
                <button class="flex-1 py-3 font-medium text-blue-500 border-b-2 border-blue-500" id="expense-tab">支出分类</button>
                <button class="flex-1 py-3 font-medium text-gray-500" id="income-tab">收入分类</button>
            </div>
        </div>

        <!-- 支出分类列表 -->
        <div id="expense-categories-list">
            <!-- 操作按钮 -->
            <div class="bg-white px-4 py-3 flex justify-between items-center">
                <div class="text-gray-500">长按拖动调整顺序</div>
                <div class="flex gap-3">
                    <button class="text-blue-500" id="edit-btn">编辑</button>
                    <button class="text-blue-500" id="add-btn">添加</button>
                </div>
            </div>

            <!-- 分类网格 -->
            <div class="bg-white px-4 py-3">
                <div class="grid grid-cols-4 gap-4">
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-red-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                                <rect x="4" y="19" width="16" height="2" rx="1" />
                            </svg>
                        </div>
                        <div class="text-xs">餐饮</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-blue-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                            </svg>
                        </div>
                        <div class="text-xs">购物</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-yellow-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="12 2 19 21 12 17 5 21 12 2"></polygon>
                            </svg>
                        </div>
                        <div class="text-xs">交通</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-green-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                            </svg>
                        </div>
                        <div class="text-xs">娱乐</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-purple-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path>
                            </svg>
                        </div>
                        <div class="text-xs">医疗</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-pink-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                        </div>
                        <div class="text-xs">旅行</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-indigo-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 7h-9"></path>
                                <path d="M14 17H5"></path>
                                <circle cx="17" cy="17" r="3"></circle>
                                <circle cx="7" cy="7" r="3"></circle>
                            </svg>
                        </div>
                        <div class="text-xs">社交</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-gray-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                        </div>
                        <div class="text-xs">其他</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 收入分类列表 (默认隐藏) -->
        <div id="income-categories-list" class="hidden">
            <!-- 操作按钮 -->
            <div class="bg-white px-4 py-3 flex justify-between items-center">
                <div class="text-gray-500">长按拖动调整顺序</div>
                <div class="flex gap-3">
                    <button class="text-blue-500">编辑</button>
                    <button class="text-blue-500">添加</button>
                </div>
            </div>

            <!-- 分类网格 -->
            <div class="bg-white px-4 py-3">
                <div class="grid grid-cols-4 gap-4">
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-green-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 7c-1.67 0-3-1.33-3-3s1.33-3 3-3 3 1.33 3 3-1.33 3-3 3z" />
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                            </svg>
                        </div>
                        <div class="text-xs">工资</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-blue-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                                <polyline points="17 6 23 6 23 12"></polyline>
                            </svg>
                        </div>
                        <div class="text-xs">奖金</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-yellow-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                            </svg>
                        </div>
                        <div class="text-xs">投资</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-purple-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="12" y1="1" x2="12" y2="23"></line>
                                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                            </svg>
                        </div>
                        <div class="text-xs">理财</div>
                    </div>
                    
                    <div class="category-item flex flex-col items-center">
                        <div class="bill-icon bg-gray-100 mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                        </div>
                        <div class="text-xs">其他</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加分类弹窗 -->
    <div class="modal-overlay" id="add-category-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="font-medium">添加分类</h3>
                <button class="modal-close">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="category-name" class="form-label">分类名称</label>
                    <input type="text" id="category-name" class="form-input" placeholder="输入分类名称">
                </div>
                
                <div class="form-group">
                    <label class="form-label">图标</label>
                    <div class="grid grid-cols-5 gap-3 mt-2">
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-blue-100 border-2 border-blue-500">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-red-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                                <rect x="4" y="19" width="16" height="2" rx="1" />
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-yellow-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="12 2 19 21 12 17 5 21 12 2"></polygon>
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-green-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-purple-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path>
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-pink-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-indigo-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 7h-9"></path>
                                <path d="M14 17H5"></path>
                                <circle cx="17" cy="17" r="3"></circle>
                                <circle cx="7" cy="7" r="3"></circle>
                            </svg>
                        </div>
                        
                        <div class="icon-item flex justify-center items-center h-12 w-12 rounded-full bg-gray-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary modal-close">取消</button>
                <button class="btn btn-primary" id="save-category-btn">保存</button>
            </div>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div class="modal-overlay" id="delete-confirm-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="font-medium">确认删除</h3>
                <button class="modal-close">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <p>确定要删除 "餐饮" 分类吗？该分类下的所有账单将被移动到"其他"分类。</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary modal-close">取消</button>
                <button class="btn btn-primary" id="confirm-delete-btn">确认删除</button>
            </div>
        </div>
    </div>

    <!-- 导航栏组件容器 -->
    <div class="bottom-nav">
      <a href="home.html" class="nav-item" id="nav-home">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
              </svg>
          </div>
          <div>首页</div>
      </a>
      <a href="bills.html" class="nav-item" id="nav-bills">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
          </div>
          <div>账单</div>
      </a>
  
      <a href="quick-entry.html" class="nav-item" id="nav-quick-entry">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="16"></line>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
              </svg>
          </div>
          <div>记账</div>
      </a>
      <a href="statistics.html" class="nav-item" id="nav-statistics">
        <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="20" x2="18" y2="10"></line>
                <line x1="12" y1="20" x2="12" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
        </div>
        <div>统计</div>
    </a>
      <a href="settings.html" class="nav-item" id="nav-settings">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
          </div>
          <div>设置</div>
      </a>
  </div>

    <script>
        // 加载状态栏组件
        fetch('../components/statusbar.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('status-bar-container').innerHTML = html;
            });
        
        // 支出/收入分类切换
        const expenseTab = document.getElementById('expense-tab');
        const incomeTab = document.getElementById('income-tab');
        const expenseCategoriesList = document.getElementById('expense-categories-list');
        const incomeCategoriesList = document.getElementById('income-categories-list');
        
        expenseTab.addEventListener('click', function() {
            // 激活当前标签
            expenseTab.classList.add('text-blue-500', 'border-b-2', 'border-blue-500');
            expenseTab.classList.remove('text-gray-500');
            
            // 取消激活另一个标签
            incomeTab.classList.remove('text-blue-500', 'border-b-2', 'border-blue-500');
            incomeTab.classList.add('text-gray-500');
            
            // 显示对应分类列表
            expenseCategoriesList.classList.remove('hidden');
            incomeCategoriesList.classList.add('hidden');
        });
        
        incomeTab.addEventListener('click', function() {
            // 激活当前标签
            incomeTab.classList.add('text-blue-500', 'border-b-2', 'border-blue-500');
            incomeTab.classList.remove('text-gray-500');
            
            // 取消激活另一个标签
            expenseTab.classList.remove('text-blue-500', 'border-b-2', 'border-blue-500');
            expenseTab.classList.add('text-gray-500');
            
            // 显示对应分类列表
            expenseCategoriesList.classList.add('hidden');
            incomeCategoriesList.classList.remove('hidden');
        });
        
        // 模态框控制
        const addCategoryModal = document.getElementById('add-category-modal');
        const deleteConfirmModal = document.getElementById('delete-confirm-modal');
        const addBtn = document.getElementById('add-btn');
        const editBtn = document.getElementById('edit-btn');
        
        // 打开添加分类模态框
        addBtn.addEventListener('click', function() {
            addCategoryModal.classList.add('active');
        });
        
        // 关闭模态框
        const closeButtons = document.querySelectorAll('.modal-close');
        closeButtons.forEach(button => {
            button.addEventListener('click', function() {
                addCategoryModal.classList.remove('active');
                deleteConfirmModal.classList.remove('active');
            });
        });
        
        // 编辑模式
        let isEditMode = false;
        editBtn.addEventListener('click', function() {
            isEditMode = !isEditMode;
            const categoryItems = document.querySelectorAll('.category-item');
            
            if (isEditMode) {
                editBtn.textContent = '完成';
                categoryItems.forEach(item => {
                    // 添加删除按钮
                    const deleteBtn = document.createElement('div');
                    deleteBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center delete-btn';
                    deleteBtn.innerHTML = '×';
                    deleteBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        deleteConfirmModal.classList.add('active');
                    });
                    
                    item.style.position = 'relative';
                    item.appendChild(deleteBtn);
                });
            } else {
                editBtn.textContent = '编辑';
                document.querySelectorAll('.delete-btn').forEach(btn => btn.remove());
            }
        });
        
        // 图标选择
        const iconItems = document.querySelectorAll('.icon-item');
        iconItems.forEach(item => {
            item.addEventListener('click', function() {
                iconItems.forEach(i => {
                    i.classList.remove('border-2', 'border-blue-500');
                });
                this.classList.add('border-2', 'border-blue-500');
            });
        });
        
        // 保存分类按钮
        document.getElementById('save-category-btn').addEventListener('click', function() {
            const categoryName = document.getElementById('category-name').value;
            if (!categoryName) {
                alert('请输入分类名称');
                return;
            }
            
            alert('分类已保存');
            addCategoryModal.classList.remove('active');
        });
        
        // 确认删除按钮
        document.getElementById('confirm-delete-btn').addEventListener('click', function() {
            alert('分类已删除');
            deleteConfirmModal.classList.remove('active');
        });
    </script>
</body>
</html> 
